<template>
	<view class="myView">
		
		<!-- 照片背景图 -->
		<view>
			<image src="../../static/map/advertising.png" class="imageTop" mode="aspectFill"></image>
		</view>
		<!-- 车票查询 -->
		<view class="queryTickets">
			<view style="width: 100%;height: 88rpx;flex-direction: row;align-items: center;justify-content: space-between;">
				<view style="background-color: #FFFFFF;width: 353rpx;border-top-left-radius: 20rpx;opacity: 0.8;"
					:style="{backgroundColor:typeNum == 0 ? '#FFFFFF' : '#393939'}" @click="typeClick('expressTicket')">
					<text class="fs-32" style="line-height: 88rpx;text-align: center;"
						:style="{color:typeNum == 0 ? '#000000' : '#FFFFFF'}">城际出行</text>
				</view>
				<view style="background-color: #393939;width: 353rpx;border-top-right-radius: 20rpx;opacity: 0.8;"
					:style="{backgroundColor:typeNum == 1 ? '#FFFFFF' : '#393939'}" @click="typeClick('carTicket')">
					<text class="fs-32" style="line-height: 88rpx;text-align: center;color: #FFFFFF;"
						:style="{color:typeNum == 1 ? '#000000' : '#FFFFFF'}">汽车票</text>
				</view>
			</view>

			<view class="ticketView">
				<view class="lineClass">
					<!-- <text class="start" @click="startStationTap" v-text="departure"></text> -->
					<view class="start" @click="startStationTap">
						<input style="margin-left: 30rpx;width: 300rpx;color: #2C2D2D;" disabled placeholder="选择上车点" v-model="departure" />
					</view>
					
					<image src="../../static/map/change.png" mode="aspectFill"
						style="width: 57rpx;height: 59rpx;margin: 0 auto;" @click="changeClick"></image>
					<!-- <text class="start" style="text-align: right;" @click="endStationTap">{{destination}}</text> -->
					<view class="start" @click="endStationTap">
						<input style="width: 250rpx;color: #2C2D2D;text-align: right;margin-right: 100rpx;" disabled placeholder="选择下车点" v-model="destination" />
					</view>
				</view>

				<view class="lineClass">
					<view style="border-bottom: 1upx solid #dadada;width: 375rpx;" @click="calendarSelect">
						<text class="dateClass" v-if="dateShow == true">{{date}}</text>
						<text class="dateClass" v-if="dateShow == false">{{selectDate}}</text>
					</view>
				</view>
				<view class="queryView">
					<button class="queryButton" @click="queryClick">查 询</button>
				</view>
			</view>

			<view class="historyView">
				<view style="justify-content: space-between; align-items: center;flex-direction: row;">
					<text class="historyTitle">历史记录</text>
					<text class="clearHistory" @click="clickHistory">清除历史</text>
				</view>
				<view class="historyListView">
					<text class="historyText" @click="historyItemTap(index)" v-for="(i,index) in historyLines"
						:key=index v-if="index<10">{{i}}</text>
				</view>
			</view>
		</view>
		<uni-calendar ref="calendar" :insert="false" :start-date="'1997-01-01'" @confirm="confirm"></uni-calendar>
	</view>
</template>

<script>
	export default {
		name: "jh-ticketHome",
		props:{
			date:{
				type:String,
				default:'选择日期'
			},
		},
		data() {
			return {
				normalPickerNum: 0,
				specialPickerNum: 0,
				isNormal: 0,
				historyLines: [],
				departure: '',
				destination: '',
				selectDate:'',
				typeNum: 1,
				changeText: '',
				dateShow:true,
			};
		},
		onLoad() {
			console.log('onLoad');
		},
		onShow() {
			console.log('onShow');
		},
		onInit() {
			console.log('onInit');
		},
		onReady() {
			console.log('onReady');
		},
		methods: {
			//---------------------------------点击车票类型---------------------------------
			typeClick(params) {
				var that = this;
				//监听事件
				uni.$on('historyLines', function(data) {
					that.historyLines = data.data;
					console.log(that.historyLines);
					if(data.data){
						var station = data.data[0].split('-');
						that.departure = station[0];
						that.destination = station[1];
					}
				    //清除监听，不清除会消耗资源
				    uni.$off('historyLines');
				});
				if (params == 'expressTicket') {
					this.typeNum = 0;
					this.$emit('typeChange', 'expressTicket');
				} else {
					this.typeNum = 1;
				}
			},
			
			//---------------------------------点击起点站---------------------------------
			startStationTap() {
				let that = this;
				//监听事件,监听下个页面返回的值
				uni.$on('endStaionChange', function(data) {
					console.log(data);
					that.departure = data.data;
				    //清除监听，不清除会消耗资源
				    uni.$off('endStaionChange');
				});
				uni.navigateTo({
					url:'../stationPicker/stationPicker'
				})
			},
			//---------------------------------点击终点站---------------------------------
			endStationTap() {
				let that = this;
				//监听事件,监听下个页面返回的值
				uni.$on('endStaionChange', function(data) {
					console.log(data);
					that.destination = data.data;
				    //清除监听，不清除会消耗资源
				    uni.$off('endStaionChange');
				});
				uni.navigateTo({
					url:'../stationPicker/stationPicker'
				})
			},
			changeClick() {
				if(this.destination != '' && this.departure != ''){
					this.changeText = this.departure;
					this.departure = this.destination;
					this.destination = this.changeText;
				}
			},
			//---------------------------------查询---------------------------------
			queryClick() {
				var that = this;
				if(that.departure == '' || that.destination == '') {
					uni.showToast({
						title: '请选择上下车点',
						icon: 'none'
					})
				}else {
					var station = that.departure + "-" + that.destination;
					if(that.historyLines) {
						for(let i = 0; i <= that.historyLines.length;i++){
							if(station == that.historyLines[i]) {
								that.historyLines.splice(i,1);
							}
						}
						that.historyLines.unshift(that.departure + "-" + that.destination);
					}
					uni.setStorage({
						key:'historyLines',
						data:that.historyLines,
					})
					//页面传参通过地址后面添加参数 this.isNormal=0是普通购票1是定制班车
					// var params='../Order/selectTickets?&startStation=' + that.departure +'&endStation=' + that.destination + '&date=' + that.datestring + '&isNormal=' + this.isNormal;
					// uni.navigateTo({ 
					// 	url:params
					// })
				}
			},
			//---------------------------------清除历史---------------------------------
			clickHistory() {

			},
			//---------------------------------点击历史记录---------------------------------
			historyItemTap() {

			},
			//---------------------------------打开日历---------------------------------
			calendarSelect:function(){
				this.$refs.calendar.open();
			},
			//---------------------------------日期确定---------------------------------
			confirm(params) {
				console.log(params);
				this.dateShow = false;
				this.selectDate = params.fulldate + ' ' + params.lunar.ncWeek;
			},
			//---------------------------------获取当前日期---------------------------------
			getTodayDate() {
				console.log('000000000000000');
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
			    var timer = year + '-' + month + '-' + day;
				return timer;
			},
		}
	}
</script>

<style lang="scss">
	.myView {
		flex-direction: column;
		width: 750rpx;
	}

	// 背景图片
	.imageTop {
		width: 750rpx;
		height: 440upx;
	}

	//查询车票整块
	.queryTickets {
		width: 706rpx;
		top: -60rpx;
		border-radius: 20rpx;
		left: 22rpx;
	}

	.ticketView {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	//选择起始点
	.lineClass {
		margin-top: 40rpx;
		flex-direction: row;
		align-items: center;
		justify-items: center;
		padding-left: 50upx;
		padding-right: 50upx;

	}

	//转换图片
	.changeImage {

		width: 57upx;
		height: 59upx;
		padding-top: 44upx;
		margin: 0 auto;

	}

	//出发点
	.start {
		font-size: 36upx;
		font-weight: 300;
		color: #2C2D2D;
		width: 260upx;
		left: 0;
		text-align: left;
		border-bottom: 1upx solid #dadada;
		margin-top: 40rpx;
		padding-bottom: 20rpx;
	}


	//选择日期
	.dateClass {
		font-size: 36upx;
		font-weight: 300;
		line-height: 125upx;
	}

	//查询视图
	.queryView {
		margin-top: 60upx;
		margin-left: 29upx;
		margin-right: 29upx;
		padding-bottom: 40rpx;
	}

	//查询
	.queryButton {
		width: 620rpx;
		height: 90upx;
		background: linear-gradient(270deg, #EC5249, #EF7D4E);
		color: #FFFFFF;
		font-size: 34upx;
		border-radius: 45upx;
	}

	.historyView {
		padding-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		width: 706upx;
		font-family: MicrosoftYaHei;
		color: #999999;
		font-size: 24upx;
	}

	.historyTitle {
		font-size: 28rpx;
		color: #2C2D2D;
		margin-left: 20rpx;
	}

	.historyListView {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		color: #999999;
		font-size: 20rpx;
		font-weight: 300;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-bottom: 20rpx;
	}

	.historyText {
		margin-top: 20rpx;
		margin-right: 20rpx;
		font-size: 28rpx;
		color: #666666;
	}

	.clearHistory {
		font-size: 28rpx;
		color: #2C2D2D;
		margin-right: 20rpx;
		float: right;
	}
</style>
